<template>
  <div>
    <div class="top">
      <div class="adminer">
        <div class="admin_img">
          <img src="../imgs/james.jpg" alt="">
        </div>
        <p class="title">Admin</p>
        <p class="admin">超级管理员</p>
        <p class="time">注册时间:2022/3/8</p>
        <p class="text">欢迎大佬来管理！！！</p>
      </div>
      <div class="echarts_1">
        <fold></fold>
      </div>
    </div>
    <div class="bottom">
      <div class="echarts_2">
        <directions></directions>
      </div>
      <div class="echarts_3">
        <direction_people></direction_people>
      </div>
    </div>
  </div>
</template>

<script setup>
import fold from '../admin/echarts/fold'
import directions from  '../admin/echarts/directions'
import direction_people from '../admin/echarts/direction_people'
</script>

<style lang="less" scoped>
.top {
  width: 100%;
  height: 300px;
  display: flex;
  .adminer {
    width: 220px;
    height: 300px;
    background-color: #fff;
    box-shadow:
        0px 5.2px 3.9px 3.5px rgba(0, 0, 0, 0.08),
        0px 11px 11px -7px rgba(0, 0, 0, 0.27);
    .admin_img {
      width: 70px;
      height: 70px;
      margin: 30px auto 0;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .title {
      margin-top: 20px;
      font-size: 20px;
      font-weight: 700;
    }
    p {
      text-align: center;
    }
    .admin {
      color: #bb1902;
    }
    .time {
      color: #47c6cd;
    }
    .text {
      color: #7395ff;
    }
  }
  .echarts_1 {
    margin-left: 30px;
    width: 1000px;
    height: 300px;
    background-color: #fff;
    box-shadow:
        0px 5.2px 3.9px 3.5px rgba(0, 0, 0, 0.08),
        0px 11px 11px -7px rgba(0, 0, 0, 0.27);
  }
}
.bottom {
  width: 100%;
  min-height: 300px;
  display: flex;
  margin-top: 20px;
  .echarts_2 {
    width: 610px;
    height: 400px;
    background-color: #fff;
    box-shadow:
        0px 5.2px 3.9px 3.5px rgba(0, 0, 0, 0.08),
        0px 11px 11px -7px rgba(0, 0, 0, 0.27);
  }
  .echarts_3 {
    width: 610px;
    height: 400px;
    margin-left: 30px;
    background-color: #fff;
    box-shadow:
        0px 5.2px 3.9px 3.5px rgba(0, 0, 0, 0.08),
        0px 11px 11px -7px rgba(0, 0, 0, 0.27);
  }
}
</style>